<template>
  <PageModal
    prevent-back
    :show="show"
    :title="$t('Appliance.OrderProgram.Title.Text')"
    :footer-size="footerSize"
    :footer-style="footerStyle"
    @back="emit('back')"
  >
    <view class="page-container">
      <SectionLayout>
        <template #title>{{ $t('Appliance.OrderProgram.SelectProgram.Button.Text') }}</template>
        <template #title-extra>
          <TextButton
            size="small"
            :text="customAdjustOptionTitle || $t('Appliance.AdjustOption.Button.Text')"
            :disabled="isOffline === true || selectedProgramDisabled"
            :plain-disabled="adjustParameterDisabled"
            @click="toAdjustView"
          />
        </template>

        <PageLayout safe-area="none">
          <ProgramList
            hide-add-favorite
            :disabled="programSelectDisabled"
            :programs="programs"
            :active-key="activeProgramKey"
            :active-tips="activeProgramTips || activeProgramRemaining"
            :groups="programGroups"
            :active-group-key="currentProgramGroupKey"
            @group-select="setActiveProgramGroup"
            @select="setActiveProgram"
          />

          <template #footer>
            <!-- <view v-if="recentOrderedPrograms.length" class="recent-card">
              <RecentCards
                single-program
                :control="control"
                :type="HistoryProgramTypes.OrderedProgram"
                @action="onOrderProgram"
              />
            </view> -->
          </template>
        </PageLayout>
      </SectionLayout>
    </view>
    <template #footer>
      <TextButton
        size="large"
        :text="$t('Appliance.OrderProgram.SelectTime.Button.Text')"
        :disabled="isOffline === true || selectedProgramDisabled"
        :plain-disabled="!activeProgram || orderTimeDisabled || !control.store.orderRelativeOption"
        @click="openTimeModal"
      />
    </template>
  </PageModal>
</template>

<script setup lang="ts">
import PageLayout from '@/layout/page/page.vue'
import PageModal from '@/common/pageModal.vue'
import TextButton from '@/common/textButton.vue'
import ProgramList from '../../components/programList.vue'
import type { ApplianceProgram } from '@/types/appliance'
import type { BaseController } from '@/controller/BaseAppliance/definition'
import { useControlState } from '@/controller/BaseAppliance/useControl'
import SectionLayout from './sectionLayout.vue'
import { footerSize, footerStyle } from '@/layout/appliance/style'
// import RecentCards from '../control/components/RecentCards.vue'
// import { type HistoryProgram, HistoryProgramTypes } from '@/api/appliance'
import type { HistoryProgram } from '@/api/appliance'

const props = defineProps<{
  show: boolean
  control: BaseController.Control
  activeProgramTips?: string // 当前程序显示的程序提示文本
  customAdjustOptionTitle?: string
  selectedProgramDisabled?: boolean
}>()
const emit = defineEmits<{
  (e: 'update:show', show: boolean): void
  (e: 'close'): void
  (e: 'back'): void
  (e: 'to-adjust'): void
  (e: 'to-select-time'): void
}>()

/**
 * 状态控制
 */
const store = computed(() => props.control.store)
const { isOffline, programSelectDisabled, adjustParameterDisabled, orderTimeDisabled } = useControlState(props.control)
function closeModal() {
  emit('update:show', false)
  emit('close')
}

/**
 * 选择程序
 */
const programGroups = computed(() => props.control.store.orderProgramGroups)
const currentProgramGroupKey = computed(() => props.control.store.currentProgramGroupKey)
const programs = computed(() => props.control.store.orderPrograms)
const activeProgram = computed(() => props.control.store.currentProgram)
const activeProgramKey = computed(() => props.control.store.currentProgramKey)
const activeProgramRemaining = computed(() => props.control.store.programRemainingText) // 程序剩余时间

async function setActiveProgramGroup(group: ApplianceProgram.Group) {
  store.value.currentProgramGroupKey = group.key
}
async function setActiveProgram(program: ApplianceProgram.Scope) {
  if (program.key === activeProgramKey.value) return
  await store.value.setCurrentProgram(program)
}

// 最近预约
const recentOrderedPrograms = computed<HistoryProgram[]>(() => store.value.recentOrderedPrograms)
// 立即预约
async function onOrderProgram() {
  closeModal()
}

// 调节参数
function toAdjustView() {
  emit('to-adjust')
}

// 选择时间
function openTimeModal() {
  emit('to-select-time')
}
</script>

<style scoped lang="less">
.page-container {
  height: 100%;
}
.recent-card {
  padding: 32rpx 24rpx;
}
</style>
